<template>
  <a-card :bordered="false">
    <search :config="searchConfig" @search="search" @getHeight="getHeight"/>
    <div class="page_table">
      <vxe-grid
        ref="xGrid"
        :border="true"
        :resizable="true"
        :showOverflow="true"
        size="mini"
        :loading="loading"
        :height="pageHeight-seachHeight-94"
        :align="left"
        :columns="columns"
        :data="dataSource"
        :toolbar-config="tableToolbar"
        :checkbox-config="checkboxConfig"
        v-bind="vexConfig"
        @checkbox-change="selectChangeEvent"
        @checkbox-all="selectChangeEvent"
      >
        <template #toolbar_buttons>
          <div class="table-operator">
            <a-button type="primary" @click="downExportXls('sign_report')">导出</a-button>
          </div>
        </template>


        <template #action="{ row,rowIndex }">
          <a v-has="'getGoodsAdress:update'" @click="handleEdit(row)">编辑</a>
          <a-divider type="vertical"/>
          <a href="javascript:;" @click='handleBusiness("收货地址",row)'>日志</a>
        </template>

        <template #inUrl="{ row }">
          <viewer :images="row.inUrl">
            <a-avatar shape="square" size="small" :src="row.inUrl[0]" icon="user"/>
          </viewer>
        </template>
        <template #outUrl="{ row }">
          <viewer :images="row.outUrl">
            <a-avatar shape="square" size="small" :src="row.outUrl[0]" icon="user"/>
          </viewer>
        </template>
        <template #update="{ row }">
          <a-switch :checked="row.status" size="small" @change="handleStatus(row,$event)"/>
        </template>
        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync="ipagination.current"
            :page-size.sync="ipagination.pageSize"
            :total="ipagination.total"
            :pageSizes="ipagination.pageSizeOptions"
            @page-change="handlePageChange">
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <getGoods ref="modalForm" @ok="modalFormOk"></getGoods>
    <business-log ref="businessLog"></business-log>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction } from '@/api/manage'
import ARow from 'ant-design-vue/es/grid/Row'
import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'

export default {
  name: 'SignConfigList',
  mixins: [PageListMixin],
  components: {
    ARangePicker,
    ARow
  },
  data() {
    return {
      description: '考勤明细报表页面',
      jianShow: '',
      leftjian: require('@/assets/leftjian.png'),
      jiantou: require('@/assets/jiantou.png'),
      showImg: false,
      imgSrc: '',
      imgIndex: 0,
      // 表头
      searchConfig: [
        {
          type: 'input',
          name: 'createName',
          placeholder: '打卡人'
        },
        {
          type: 'a-select',
          option: [{
            name: '上下班打卡',
            value: '0'
          }, {
            name: '自由签到',
            value: '1'
          }],
          name: 'signType',
          placeholder: '请选择打卡类型'
        },
        {
          type: 'date',
          name: 'signInDate',
          placeholder: '打卡开始日期'
        },
        {
          type: 'date',
          name: 'signOutDate',
          placeholder: '打卡结束日期'
        },
        {
          type: 'input',
          name: 'signInResult',
          placeholder: '签到结果'
        },
        {
          type: 'input',
          name: 'signOutResult',
          placeholder: '签退结果'
        },
        {
          type: 'input',
          name: 'posName',
          placeholder: '岗位名称'
        },
        {
          type: 'tree-select',
          dataType: 'org',
          name: 'orgCode',
          placeholder: '所属组织'
        },
      ],
      columns: [
        {
          minWidth: 60,
          type: 'checkbox',
          fixed: 'left'
        },
        {
          title: '打卡类型',
          minWidth: 80,
          field: 'signTypeStr'
        },
        {
          title: '打卡人',
          minWidth: 80,
          field: 'createName'
        },
        {
          title: '组织',
          minWidth: 80,
          field: 'orgName'
        },
        {
          title: '职位',
          minWidth: 80,
          field: 'posName'
        },
        {
          title: '年月',
          minWidth: 80,
          field: 'ym'
        },
        {
          title: '打卡日期',
          minWidth: 80,
          field: 'signDate'
        },
        {
          title: '签到时间',
          minWidth: 80,
          field: 'signInTime'
        },
        {
          title: '签到地址',
          minWidth: 80,
          field: 'signInAddress'
        },
        {
          title: '签到图片',
          minWidth: 80,
          field: 'inUrl',
          slots: { default: 'inUrl' },
          // scopedSlots: {customRender: 'imgInPath'}
          // slots: { default: 'inUrl' }
        },
        {
          title: '签到备注',
          minWidth: 80,
          field: 'signInRemarks'
        },
        {
          title: '签到结果',
          minWidth: 80,
          field: 'signInResult'
        },
        {
          title: '签到地点状态',
          minWidth: 100,
          field: 'signInAddressType'
        },
        {
          title: '签退时间',
          minWidth: 80,
          field: 'signOutTime'
        },
        {
          title: '签退地址',
          minWidth: 80,
          field: 'signOutAddress'
        },
        {
          title: '签退图片',
          minWidth: 80,
          field: 'outUrl',
          // scopedSlots: {customRender: 'imgOutPath'},
          slots: { default: 'outUrl' }
        },
        {
          title: '签退备注',
          minWidth: 80,
          field: 'signOutRemarks'
        },
        {
          title: '签退结果',
          minWidth: 80,
          field: 'signOutResult'
        },
        {
          title: '签退地点状态',
          minWidth: 100,
          field: 'signOutAddressType'
        },
        // {
        //   title: '操作',
        //   minWidth:100,
        //   field: 'action',
        //   fixed:'right',
        //   scopedSlots: {customRender: 'action'}
        // }
      ],
      isorter: {
        permflag: 'sfa_sign_list'
      },
      url: {
        list: window._CONFIG['domianSfaURL'] + '/sfaSignController/findPageListStatement',
        delete: window._CONFIG['domianSfaURL'] + '/signConfig/deleteById',
        deleteBatch: window._CONFIG['domianSfaURL'] + '/signConfig/deleteBatch',
        startOrStopUrl: window._CONFIG['domianSfaURL'] + '/signConfig/status/startOrStop'
      }
    }
  },

  methods: {
    // 大图左箭头
    // handleClickLeft(){
    //   if(this.imgIndex===0){
    //     this.imgIndex=(this.imgSrc.length)-1;
    //     return
    //   }
    //   if(this.imgIndex<this.imgSrc.length && this.imgIndex!==0){
    //     this.imgIndex--;
    //     return
    //   }
    // },
    // 大图右箭头
    // handleClickRight(){
    //   if(this.imgIndex<(this.imgSrc.length-1)){
    //     this.imgIndex++;
    //     return
    //   }
    //   if(this.imgIndex===(this.imgSrc.length-1)){
    //     this.imgIndex=0;
    //     return
    //   }
    // },
    //遮罩层隐藏
    viewImg() {
      this.showImg = false
    },

    clickImg(path) {
      // console.log(path)
      // this.imgIndex = 0;
      console.log(path)
      this.showImg = true
      // 获取当前图片地址
      this.imgSrc = (path)
      // console.log(typeof(this.imgSrc) )
      // this.jianShow = false;
      // if (path.length>1){
      //   this.jianShow = true;
      // console.log(this.jianShow);
      // }
    },
    startorstop: function (status) {

      if (!this.url.startOrStopUrl) {
        this.$message.error('请设置url启用停用!')
        return
      }
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning('请选择一条记录！')
        return
      }
      let param = { ...this.queryParam }
      param['status'] = status
      if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
        param['selections'] = this.selectedRowKeys.join(',')
      } else {
        param['selections'] = this.selectedRowKeys[0]
      }
      // if (this.selectedRowKeys.length != 1) {
      //   this.$message.warning('请选择一条记录！');
      //   return;
      // } else {
      // var id = this.selectedRowKeys;
      var that = this
      that.loading = true
      getAction(this.url.startOrStopUrl, param).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
        that.loading = false
      })
    }
  }

}
</script>

<style scoped>
@import '~@assets/less/common.less';
/*动画*/
.fade-enter-active,
.fade-leave-active {
  transition: all .2s linear;
  transform: translate3D(0, 0, 0);
}

.fade-enter,
.fade-leave-active {
  transform: translate3D(100%, 0, 0);
}

/* bigimg */

.img-view {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*遮罩层样式*/
.img-view {
  position: fixed;
  z-index: 99997;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*不限制图片大小，实现居中*/
.img-view {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99998;
}

.img-view .img {
  position: absolute;
  min-width: 50%;
  max-width: 50%;
  display: block;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 99999;
}

.img-view .img img {
  width: 100%;
}

.left {
  position: absolute;
  min-width: 80px;
  max-width: 80px;
  display: block;
  left: 0px;
  /*margin: auto;*/
  z-index: 99999;
  top: 50%;
}

.right {
  position: absolute;
  min-width: 80px;
  max-width: 80px;
  display: block;
  right: 0px;
  top: 50%;
  /*margin: auto;*/
  z-index: 99999;
}
</style>